<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-20 19:17:39
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-28 16:52:36
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\dishmana\dishbom\components\editbom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <pb-drawer v-model="props.isVisibles" :title="'编辑菜品售价'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
    @confirmFn="confirmFn" class="Editdrwers">
    <div class="flex drawerdiv m-t3">
      <div class="left">
        <img :src="props.Bomdetails.pic" alt="">
      </div>
      <div class="right">
        <div class="flex top m-b3">
          <div class="m-r3">定价方式：</div>
          <div><el-radio-group v-model="props.Bomdetails.pricingType" @change="setestimatedSellPriceFn">
              <el-radio value="portion" size="large">按份定价</el-radio>
              <el-radio value="weight" size="large">按重量定价 </el-radio>
              <pb-input v-if="props.Bomdetails.pricingType == 'weight'"
                v-model="props.Bomdetails.pricingTypeWeightPrice" @input="setPricingweightFn($event)" type="number"
                style="max-width: 600px" placeholder="最多俩位小数" :width="'220px'" :appendtitle="'元/50g'" class="m-r10">
              </pb-input>
              <el-radio value="roi" size="large">投入产出比(份)
              </el-radio>
              <pb-input v-if="props.Bomdetails.pricingType == 'roi'" v-model="props.Bomdetails.pricingTypeRoiRate"
                style="max-width: 600px" @input="setPricingroiFn($event)" type="number" placeholder="最多俩位小数"
                :width="'200px'" :appendtitle="'%'">
              </pb-input>
            </el-radio-group></div>
        </div>
        <div class="flex top m-b4">
          <span class="m-r3">定价权限：</span>
          <span>
            <el-radio-group v-model="props.Bomdetails.pricingAuthorityType">
              <el-radio :value="0" size="large">中心定价</el-radio>
              <el-radio :value="1" size="large">自定义</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="m-b4">
          <span class="m-r3">耗材成本：</span>
          <span class="spanwidth">{{ props.Bomdetails.conosumablesCost ? props.Bomdetails.conosumablesCost : 0
            }}元</span>
          <span>食材成本：</span>
          <span class="spanwidth">{{ props.Bomdetails.materialCost ? props.Bomdetails.materialCost : 0 }}元</span>
          <!-- <span>预估售价：</span>
          <span>{{ props.Bomdetails.estimatedSellPrice ? props.Bomdetails.estimatedSellPrice : 0
            }}元</span> -->
        </div>
        <div class="flex">
          <el-form-item label="调料成本：">
            <pb-input v-model.trim="props.Bomdetails.seasoningCost" @input="setSeasoningCoste($event)"
              style="max-width: 600px" placeholder="最多俩位小数" :width="'220px'" type="number" :appendtitle="'元'">
            </pb-input>
          </el-form-item>
          <el-form-item label="损耗率：" class="m-l16">
            <pb-input v-model.trim="props.Bomdetails.lossCostRate" @input="setLossCostRate($event)"
              style="max-width: 600px" placeholder="最多俩位小数" :width="'220px'" type="number" :appendtitle="'%'">
            </pb-input>
          </el-form-item>
          <!-- <span class="m-r3">调料成本：</span>
          <span class="spanwidth">
            {{ props.Bomdetails.seasoningCost ? props.Bomdetails.seasoningCost : 0 }}元</span>
          <span class="m-r3">损耗成本：</span>
          <span class="spanwidth">{{ props.Bomdetails.lossCostRate ? props.Bomdetails.lossCostRate : 0 }}%</span> -->
        </div>
        <div>
          <el-form :model="dishForm" label-width="auto" inline>
            <el-form-item label="实际售价：">
              <pb-input v-model.trim="props.Bomdetails.sellPrice" @input="setSellPrice($event)" style="max-width: 600px"
                placeholder="最多俩位小数" :width="'220px'" type="number"
                :appendtitle="'元/' + (props.Bomdetails.pricingType == 'weight' ? 'kg' : '份')">
              </pb-input>
            </el-form-item>
            <el-form-item label="预估售价：" class="m-l8" v-show="props.Bomdetails.pricingType != 'portion'">
              <span>{{ props.Bomdetails.estimatedSellPrice ? props.Bomdetails.estimatedSellPrice : 0
                }}元</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="定价信息" name="first">
        <div class="editbottom">
          <div class="center1">
            <div>
              <div><span>菜品编码：</span><span>{{ newbomBomdetails.dishCode }}</span></div>
              <div><span>助记码：</span><span>{{ newbomBomdetails.mnemonicCode }}</span></div>
              <div><span>技法：</span><span>{{ newbomBomdetails.skill }}</span></div>
              <div><span>原料类别：</span><span>{{ newbomBomdetails.materialCategory }}</span></div>
            </div>
            <div class="m-tb">
              <div><span>菜品名称：</span><span>{{ newbomBomdetails.dishName }}</span></div>
              <div><span>生熟比：</span><span>{{ newbomBomdetails.curingRate }}</span></div>
              <div><span>口味：</span><span>{{ newbomBomdetails.taste }}</span></div>
              <div class="warps"><span>标签：</span>
                <div class="lists">
                  <div v-for="(ele, index) in newbomBomdetails.dishTargetAttributeNames" :key="index">
                    {{ ele }}
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div><span>菜品分类：</span><span>{{ newbomBomdetails.dishTypeName }}</span></div>
              <div><span>份重(熟)：</span><span>{{ newbomBomdetails.dishWeight }}</span></div>
              <div><span>供餐模式：</span><span>{{ newbomBomdetails.dishUseScopeName }}</span></div>
            </div>
          </div>
        </div>
        <div class="videos">
          <div class="title m-b2">工艺视频：</div>
          <Videos class="vmp4" v-if="newbomBomdetails.video && newbomBomdetails.video != ''"
            :videoSrc="newbomBomdetails.video" width="353" height="200">
          </Videos>
          <div class="vmp4" v-else>暂无视频</div>
        </div>
        <div class="right">
          <div class="title">
            烹饪方法：
          </div>
          <div>
            {{ newbomBomdetails.cookingMethods }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="BOM信息" name="second">
        <Bominfo :Bomdata="props.Bomdata" />
      </el-tab-pane>
      <el-tab-pane label="耗材BOM" name="third">
        <Consum :Bomdata="props.Bomdata">
        </Consum>
      </el-tab-pane>
      <el-tab-pane label="历史定价" name="fourth">
        <HistoryPic :Bomdata="props.Bomdata">

        </HistoryPic>
      </el-tab-pane>
    </el-tabs>
  </pb-drawer>
</template>

<script lang="ts" setup>
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import { EditDishPricingApi, GttDishBomDetalApi } from '@/api/Dashmana'
import videoUrl from '@/assets/images/devceshi.mp4';
import Bominfo from './bominfo.vue'
import Consum from './Consuminfo.vue'
import HistoryPic from './historypic.vue'
const dishForm = ref({})
const activeName = ref('first')
const emit = defineEmits(['OffEdit', 'sendedit'])
const props = defineProps({
  isVisibles: {
    type: Boolean,
    default: false
  },
  Bomdata: {
    type: Object,
    default: {}
  },
  Bomdetails: {
    type: Object,
    default: {}
  }
})
const setPricingweightFn = (event) => {
  let value = Number(event.target.value).toFixed(2);
  props.Bomdetails.pricingTypeWeightPrice = parseFloat(value) > 10000000000 ? 9999999999 : parseFloat(value)
  if (props.Bomdetails.materialWeight != 0) {
    props.Bomdetails.estimatedSellPrice = parseFloat(
      ((props.Bomdetails.materialWeight / 50) * props.Bomdetails.pricingTypeWeightPrice).toFixed(2)
    );
  } else {
    props.Bomdetails.estimatedSellPrice = 0;
  }
}
const setPricingroiFn = (event) => {
  let value = Number(event.target.value).toFixed(2);
  props.Bomdetails.pricingTypeRoiRate = parseFloat(value) > 100 ? 100 : parseFloat(value)
  if (props.Bomdetails.pricingTypeRoiRate && props.Bomdetails.pricingTypeRoiRate !== 0) {
    props.Bomdetails.estimatedSellPrice = parseFloat((props.Bomdetails.totalCost * 1.06 / (props.Bomdetails.pricingTypeRoiRate / 100)).toFixed(2));
  } else {
    // 当 pricingTypeRoiRate 为 0 时，可以给 estimatedSellPrice 赋一个默认值，比如 0
    props.Bomdetails.estimatedSellPrice = 0;
  }
}
const setestimatedSellPriceFn = (val: any) => {
  if (val == 'roi') {
    // console.log(props.Bomdetails.pricingTypeRoiRate, '222321')
    if (props.Bomdetails.pricingTypeRoiRate && props.Bomdetails.pricingTypeRoiRate !== 0) {
      props.Bomdetails.estimatedSellPrice = parseFloat((props.Bomdetails.totalCost * 1.06 / (props.Bomdetails.pricingTypeRoiRate / 100)).toFixed(2));
    } else {
      // 当 pricingTypeRoiRate 为 0 时，可以给 estimatedSellPrice 赋一个默认值，比如 0
      props.Bomdetails.estimatedSellPrice = 0;
    }
  } else if (val == 'weight') {
    if (props.Bomdetails.materialWeight != 0) {
      props.Bomdetails.estimatedSellPrice = parseFloat(
        ((props.Bomdetails.materialWeight / 50) * props.Bomdetails.pricingTypeWeightPrice).toFixed(2)
      );
    } else {
      props.Bomdetails.estimatedSellPrice = 0;
    }
  }
}
const setLossCostRate = (event) => {
  let value = Number(event.target.value).toFixed(2);
  props.Bomdetails.lossCostRate = parseFloat(value) > 100 ? 100 : parseFloat(value)
}
const setSeasoningCoste = (event) => {
  let value = Number(event.target.value).toFixed(2);
  props.Bomdetails.seasoningCost = parseFloat(value) > 10000000000 ? 9999999999 : parseFloat(value)
}
const setSellPrice = (event) => {
  let value = Number(event.target.value).toFixed(2);
  props.Bomdetails.sellPrice = parseFloat(value) > 10000000000 ? 9999999999 : parseFloat(value)
}
const newbomBomdetails = ref([] as any)
const CancelFn = () => {
  emit('OffEdit')
}
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
const handleClick = () => {

}
const confirmFn = () => {
  EditDishPricingApi(
    {
      "dishId": props.Bomdetails.dishId,
      "pricingType": props.Bomdetails.pricingType,
      "sellPrice": Number(props.Bomdetails.sellPrice),
      "pricingAuthorityType": props.Bomdetails.pricingAuthorityType,
      "pricingTypeWeightPrice": props.Bomdetails.pricingTypeWeightPrice,
      "pricingTypeRoiRate": props.Bomdetails.pricingTypeRoiRate,
      "seasoningCost": props.Bomdetails.seasoningCost,
      "lossCostRate": props.Bomdetails.lossCostRate
    }
  ).then((res: any) => {
    if (res.code == 2000) {
      createMessage({
        message: '编辑成功'
      })
      emit('sendedit')
    }
  })
}
onMounted(() => {
  GttDishBomDetalApi({ dishCode: props.Bomdetails.dishCode }).then((res: any) => {
    newbomBomdetails.value = res.data
  })
})
</script>
<style lang="scss">
.bomdrwers {
  .el-form-item {
    margin-bottom: 0;
  }

  .el-form--inline.el-form--label-top {
    display: block;
  }

  .el-form-item--default .el-form-item__label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    height: 24px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 24px;
    text-align: right;
    font-style: normal;
    text-transform: none;
    margin-bottom: 8px;
  }

  .el-textarea__inner {
    resize: none;
    height: 104px;
  }

  .el-input__inner[type="textarea"]::webkit-resizer {
    display: none;
    /* 这可能不起作用，因为伪元素的名称可能不同 */
  }

  .el-form-item__label-wrap {
    margin-left: 0 !important;
  }
}
</style>
<style lang="scss" scoped>
.Editdrwers {
  ::v-deep thead th {
    background: #F5F5F5 !important;
    padding: 9px 16px !important;
  }

  ::v-deep .cell {
    padding: 0px
  }

  ::v-deep tfoot td {
    padding: 16px
  }

  .left {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    font-style: normal;
    text-transform: none;
    margin-right: 16px;
  }

  .text {
    margin: 40px 0 16px 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: space-between;

    >span:last-child {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #0D968B;
      cursor: pointer;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
    margin-bottom: 8px;
  }

  .drawerdiv {
    .left {
      margin-right: 16px;
      margin-bottom: 48px;

      img {
        width: 180px;
        height: 180px;
      }
    }

    .right {
      .top {
        align-items: center;
      }
    }

    .center1 {
      width: 744px;

      .m-tb {
        margin: 16px 0;
      }

      >div {
        display: flex;

        >div:first-child {
          width: 23%
        }

        >div:nth-child(2) {
          width: 20%
        }

        >div {
          margin-right: 28px;

          >span:first-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            font-style: normal;
            text-transform: none;
          }

          >span:last-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-style: normal;
            text-transform: none;
          }
        }
      }

      // margin-right: 40px;
    }
  }

  // .editbottom {
  //   .videos {
  //     text-indent: 40px;

  //     .vmp4 {
  //       width: 136px;
  //       height: 74px;
  //       margin: 0 40px;

  //     }
  //   }

  //   .right {
  //     padding: 0 0 0 40px;
  //     font-family: PingFang SC, PingFang SC;
  //     font-weight: 400;
  //     font-size: 14px;
  //     color: rgba(0, 0, 0, 0.85);
  //     text-transform: none;
  //   }

  //   .title {
  //     font-family: PingFang SC, PingFang SC;
  //     font-weight: 400;
  //     font-size: 16px;
  //     color: rgba(0, 0, 0, 0.65);
  //     font-style: normal;
  //     text-transform: none;
  //   }
  // }

  .spanwidth {
    width: 108px;
    display: inline-block;
  }

  .editbottom {
    .left {
      margin-right: 16px;
      margin-bottom: 48px;

      img {
        width: 104px;
        height: 104px;
      }
    }

    .center1 {
      width: 744px;

      .m-tb {
        margin: 16px 0;
      }

      >div {
        display: flex;

        >div:first-child {
          width: 25%
        }

        >div:nth-child(2) {
          width: 25%
        }

        >div:nth-child(3) {
          width: 22%
        }

        >div:nth-child(4) {
          flex: 1;
        }

        >div {

          >span:first-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            font-style: normal;
            text-transform: none;
          }

          >span:last-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-style: normal;
            text-transform: none;
          }
        }
      }

      // margin-right: 40px;
    }

    .right {
      padding: 0 0 0 40px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      text-transform: none;
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      font-style: normal;
      text-transform: none;
    }

    .warps {
      position: relative;

      .lists {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        left: 50px;
        top: -10px;

        // top: 3px;
        // width: 150px;
        >div {
          color: #0D968B;
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #2BD4BD;
          padding: 0 4px;
          margin-right: 8px;
          margin-top: 10px;
        }
      }
    }
  }

  .videos {
    margin: 20px 0;
    color: rgba(0, 0, 0, 0.65);
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;

    .vmp4 {
      width: 353px;
      height: 200px;
    }
  }
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #fff !important;
}

::v-deep .el-radio__inner::after {
  background-color: var(--pb-color-primary);
  width: 9px;
  height: 9px
}
</style>
